<script lang="ts" setup>
import {UserUserSeriver} from '@/api/user'
import {ref} from 'vue'

interface ParamsFomat{
  username:number |null
   page_size:number
   page_number:number
}

const params = ref({
  username:null,
  page_size: 10,
  page_number: 1
})
const total = ref(0)
const userList = ref([])
const getUserList = async()=>{
 const res =  await UserUserSeriver(params.value)
 userList.value = res.data.data.result
 total.value = res.data.data.total
 ElMessage.success('获取信息成功！')
}
getUserList()
const handleSizeChange = (val:number)=>{
   params.value.page_number = 1
   params.value.page_size = val
   getUserList()
}  
const handleCurrentChange = (val:number)=>{
   params.value.page_number = val
   getUserList()
}

const Search = ()=>{
  params.value.page_number = 1
  getUserList()
  ElMessage.success('搜索成功！')

}
const Reset = ()=>{
  params.value.page_number = 1
  params.value.username = null
  getUserList()
  ElMessage.success('重置成功！')
}
</script>

<template>
   <div class="wrapped">
     <el-card>
       <div class="wrapped-content">
          <div class="select">
            <div class="input">
            <el-form-item>
                <el-input placeholder="输入账号进行搜索" v-model="params.username"  suffix-icon="Search"/>
            </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="Search">搜索</el-button>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="Reset">重置</el-button>
            </el-form-item>
            </div>
            <div class="btn">
                <el-button type="primary">添加用户管理</el-button>
            </div>
          </div>
             <el-table :data="userList" border   style="width: 100%">
             <el-table-column type="index" align="center" label="序号" width="80" />
             <el-table-column prop="username" align="center" label="账号" width="200" />
              <el-table-column prop="nickname" align="center" label="姓名" width="200" />
             <el-table-column prop="department" align="center" label="部门" width="200" />
              <el-table-column prop="email" align="center" label="邮箱" width="200" />
              <el-table-column prop="created_time" align="center" label="创建时间" width="200">
                <template #default='{row}'>
                   {{row.created_time?.slice(0,16)}}
                </template>
              </el-table-column>
             <el-table-column  align="center" label="操作" />
             <template #empty>
            <el-empty description="暂无数据" />
            </template>
             </el-table>       
            <el-pagination
                v-model:current-page="params.page_number"
                v-model:page-size="params.page_size"
                :page-sizes="[5, 10, 20, 30]"
                :background="true"
                layout=" jumper,total, sizes, prev, pager, next"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="float: right; margin: 10px 0;"

            />

   </div> 
     </el-card>
   </div>
</template>

<style lang="scss" scoped>
.wrapped{
.wrapped-content{
    height: 600px;
    padding: 0 10px;
    .select{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .input{
            display: flex;
            justify-content: flex-start;
            .el-input,.el-select{
              width: 200px;
              margin-right: 10px;
            }
            .el-button{
                margin-right:10px ;
            }
        }

    }
}
}
</style>